<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>ZUI -表单验证控件</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/form.css">
    <link rel="stylesheet" type="text/css" href="css/button.css">
    <link rel="stylesheet" type="text/css" href="css/validate.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-mvalidate.js"></script>
</head>

<body class="demo-bgf2f2f2">
    <header class="zui-header">
        <i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
        <h1 class="title">表单验证控件</h1>
    </header>
    <div class="demo-hd-1 ml10 mr10">验证类型1</div>
    <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
        <form class="zform zform-radius" action="https://www.wnworld.com" id="form1">
            <fieldset class="zform-fieldset">
                <div class="zform-control">
                    <div class="control-field">
                        <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username">
                    </div>
                </div>
                <div class="zform-control zform-control-verifycode">
                    <div class="control-field" style="padding-right: 145px;">
                        <input type="text" class="field-text" data-required="true" placeholder="手机号码" id="telphone" data-pattern="^0?1[3|4|5|8][0-9]\d{8}$" data-descriptions="telphone">
                    </div>
                    <div class="control-verifycode" style="width: 130px">
                        <button class="zbtn zbtn-primary  zbtn-lg" id="btn-3" type="button">发送验证码</button>
                    </div>
                </div>
                <div class="zform-control">
                    <div class="control-field">
                        <input type="password" class="field-text" placeholder="请输入短信验证码" id="phoneyzm" data-required="true" data-descriptions="phoneyzm" data-conditional="phoneyzm">
                    </div>
                </div>
            </fieldset>
            <input type="submit" id="x2" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">
        </form>
    </div>
    <script type="text/javascript">
    $(function() {

        var phoneYZM;
        $("#btn-3").on("click", function() {
            var phone = $.trim($("#telphone").val());
            if (!phone) {
                $.mvalidateTip("请输入号码！");
                return;
            } else if (!/^0?1[3|4|5|8]\d{9}$/.test(phone)) {
                $.mvalidateTip("你输入的手机号码不正确！");
                return;
            }
            $.ajax({
                url: "php/phoneCode.php",
                type: "post",
                async: false,
                data: {
                    phonenumber: phone
                },
                success: function(data) {
                    if (!!data) {
                        phoneYZM = data;
                        alert(phoneYZM)
                    }
                }
            });

        });
        $("#form1").mvalidate({
            type: 1,
            onKeyup: true,
            sendForm: false,
            firstInvalidFocus: false,
            valid: function(event, options) {
                //点击提交按钮时,表单通过验证触发函数
                alert("验证通过！接下来可以做你想做的事情啦！");
                event.preventDefault();
            },
            conditional: {
                phoneyzm: function() {
                    return $("#phoneyzm").val() == phoneYZM;
                }
            },
            descriptions: {
                username: {
                    required: '请输入用户名'
                },
                telphone: {
                    required: '请输入手机号码',
                    pattern: '你输入的手机格式不正确'
                },
                phoneyzm: {
                    required: '请输入手机验证码',
                    conditional: '您输入的手机短信验证码不正确'
                }
            }
        });




    })
    </script>
</body>

</html>
